<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <style>
    /* 整体样式 */
    body {
      font-family: "Comic Sans MS", cursive, sans-serif;
      background-color: #f0f5ff;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-image: url('/image/2.gif'), url('/image/2.gif');
      background-size: 400px 300px;
      background-repeat: no-repeat;
      background-position: left center, right center;
      position: relative;
      /* 添加相对定位 */
    }

    /* 容器样式 */
   .container {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 300px;
      text-align: center;
      position: relative;
    }

    /* 标题样式 */
    h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

    /* 输入框样式 */
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    /* 按钮样式 */
    button {
      width: 100%;
      padding: 10px;
      cursor: pointer;
    }

   .password-login {
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
    }

   .password-login:hover {
      background-color: #0056b3;
    }

   .no-password-login {
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

   .no-password-login:hover {
      background-color: #218838;
    }

    /* 链接样式 */
    a {
      color: #007bff;
      text-decoration: none;
      display: block;
      margin-top: 10px;
    }

    /* 用于控制视频链接显示隐藏的样式，这里不需要隐藏，可删除相关样式 */
   .video-link-container {
      font-size: 14px;
      /* 设置字体大小为 14px，可根据需要调整 */
    }

    /* 装饰图形样式 */
   .decoration {
      position: absolute;
      width: 80px;
      height: 80px;
    }

   .decoration-top-left {
      top: -20px;
      left: -20px;
      background-image: url('');
    }

   .decoration-bottom-right {
      bottom: -20px;
      right: -20px;
      background-image: url('');
    }

    /* 新增的 logo 样式 */
   .logo {
      color: #ff00ff;
      /* 设置颜色为紫色，可根据喜好修改 */
      animation: blink 1s infinite;
      /* 应用闪烁动画，1 秒周期，无限循环 */
      font-size: 100px;
      /* 设置字体大小 */
      display: block;
      /* 使元素块级显示 */
      text-align: center;
      /* 文本居中 */
      position: absolute;
      top: 0;
      width: 100%;
    }

    /* 新增的彩色霓虹闪烁动画 */
    @keyframes neonFlicker {
      0% {
        color: #ff0000;
        opacity: 1;
      }

      10% {
        color: #00ff00;
        opacity: 0.8;
      }

      20% {
        color: #0000ff;
        opacity: 1;
      }

      30% {
        color: #ffff00;
        opacity: 0.8;
      }

      40% {
        color: #ff00ff;
        opacity: 1;
      }

      50% {
        color: #00ffff;
        opacity: 0.8;
      }

      60% {
        color: #ff0000;
        opacity: 1;
      }

      70% {
        color: #00ff00;
        opacity: 0.8;
      }

      80% {
        color: #0000ff;
        opacity: 1;
      }

      90% {
        color: #ffff00;
        opacity: 0.8;
      }

      100% {
        color: #ff00ff;
        opacity: 1;
      }
    }

    /* 应用动画到 Gitee 和 Blog 链接 */
   .video-link-container a[href="https://blog.csdn.net/2401_82648291?spm=1010.2135.3001.5343"],
   .video-link-container a[href="https://gitee.com/wang-yimingq"],
   .video-link-container a[href="1"] {
      animation: neonFlicker 2s infinite;
    }

    @keyframes blink {
      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <!-- 新增 logo 元素在页面最上方 -->
  <span class="logo">羑悻的小杀马特.</span>
  <!-- 登录表单 -->
  <div class="container">
    <div class="decoration decoration-top-left"></div>
    <div class="decoration decoration-bottom-right"></div>
    <h2>登录</h2>
    <form action="login" method="get">
      <input type="text" name="username" placeholder="用户名">
      <input type="password" name="password" placeholder="密码">
      <button class="password-login" type="submit">登录(需要密码版)</button>
    </form>
    <button class="no-password-login" onclick="window.location.href='/video.html'">登录(无需密码版)</button>
    <p style="text-align: center; margin-top: 20px;">
      <img src="/image/1.png" />
      <a href="/home.html">点击进入主页【快来点击】</a>
      <div class="video-link-container">
        <!-- <a href="/video.html" target="_blank">点击观看图生视频</a> -->
        <a href="https://blog.csdn.net/2401_82648291?spm=1010.2135.3001.5343" target="_blank">点击进入我的 blog！</a>
        <a href="https://gitee.com/wang-yimingq" target="_blank">点击进入我的 gitee！</a>
        <a href="1" target="_blank">点击自动打款</a>
        <!--target="_blank"跳转新窗口-->
      </div>
    </p>
  </div>
</body>

</html>    